<template>
	<view>
		<view class="mainView">
			<view class="user">
				<image :src="emailSrc"class="email"></image>
				<input :class="okEmail?'input':'errEmail'" v-model="email" placeholder="请输入您的邮箱" @input="onInput" focus />
			</view>
			<textarea class="context"  v-model="context" placeholder="请输入反馈内容"></textarea>
			<button class="button" type="primary" plain @click="onClickButton">发送反馈</button>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				emailSrc:this.myConfig.storageUrl+'/static/email.png',
				email:'',
				okEmail:false,
				context:''
			}
		},
		methods:{
			onInput(){
				const that=this;
				var isEmail = /^\w+\@+[0-9a-zA-Z]+\.(com|com.cn|edu|hk|cn|net)$/;
				if (isEmail.test(that.email))
					that.okEmail=true;
				else
					that.okEmail=false;
			},
			onClickButton(){
				const that=this;
				if(!that.okEmail){
					wx.showToast({
						title:'请输入正确的邮箱',
						icon:'none',
						duration:1200
					});
					return ;
				}
				if(that.context=='')
					return ;
				wx.request({
					url:that.myConfig.hostUrl+'/api/feedback.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId,
						email:that.email,
						context:that.context
					},
					success:function(res){
						console.log(res);
						if(res.data.errCode==200){
							uni.navigateBack({});
							uni.showToast({
								title:'反馈成功',
								duration:1200
							});
						}else{
							uni.showToast({
								title:'系统繁忙，请重试',
								icon:'none',
								duration:1200
							});
						}
					},
					fail:function(){
						uni.showToast({
							title:'系统繁忙，请重试',
							icon:'none',
							duration:1200
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mainView{
		padding: 25rpx;
	}
	.user{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.email{
		width: 80rpx;
		height: 80rpx;
	}
	.input{
		width: calc(100% - 80rpx - 60rpx);
		height: 60rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #eaeaea;
		border-radius: 40rpx;
		color: #4CD96E;
	}
	.errEmail{
		width: calc(100% - 80rpx - 60rpx);
		height: 60rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: #eaeaea;
		border-radius: 40rpx;
		color: #DD524D;
	}
	.test{
		color: red;
	}
	.context{
		width: calc(100% - 60rpx);
		padding: 30rpx;
		margin-top: 20rpx;
		background-color: #eaeaea;
		overflow: auto;
		border-radius: 30rpx;
	}
	.button{
		margin-top: 20rpx;
	}
</style>
